<template>
  <div id="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="active_box">
        <img src="../assets/logo.png" alt="头像"/>
      </div>
      <!-- 登录表单区域 -->
      <el-form class="login_form" :rules="rules" ref="loginForm" :model="loginForm">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="iconfont icon-yonghu"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" prefix-icon="iconfont icon-mima" show-password></el-input>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item class="btn_box">
          <el-button type="primary" @click="submitForm('loginForm')" :loading="isLoading">登录</el-button>
          <el-button type="info" @click="resetForm('loginForm')">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data() {
      return {
        // 登录表单绑定的数据
        loginForm: {
          username: '',
          password: ''
        },
        // 表单验证规则
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度应为 3 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 12, message: '密码长度应为 6 到 12 个字符', trigger: 'blur' }
          ]
        },
        // 判断请求是否发送中，若发送中则登录按钮显示loading图标
        isLoading: false
      }
    },
    methods: {
      // 提交表单
      submitForm(formRef) {
        this.$refs[formRef].validate(valid => {
          // valid为false则表单验证失败，退出
          if (!valid) return
          // 开始登录，登录按钮加载loading图标
          this.isLoading = true
          // 发送post请求，then为成功，catch为失败
          this.$ajax.post('login/', this.$ajax.stringify(this.loginForm))
                  // 服务器有数据返回调用success，没有数据调用error
                  .then(this.success).catch(this.error)
                  // 无论是否有数据，都会调用finally
                  .finally(() => {
                    // 登录结束，取消登录按钮loading图标显示
                    this.isLoading = false
                  })
        })
      },
      // 成功返回数据，处理是否登录成功
      success(res) {
        let data = res.data
        // 账号密码校验成功
        if (data.status === 'success') {
          this.$message({
            message: '欢迎，' + data.username,
            type: 'success',
            // 消息框显示时间（ms)
            duration: 1500
          })
          // 登录成功后的操作
          localStorage.setItem('isLogin', '1')
          this.$router.push('/home')
        }
        // 校验失败
        else
          this.$message({
            message: data.error_msg,
            type: 'error',
            duration: 1500
          })
      },
      // 无法返回数据，连接服务器失败
      error(err) {
        this.$message({
          message: '请检查网络连接！',
          type: 'error',
          duration: 1500
        })
        console.error(err)
      },
      // 重置表单，formRef为将要重置表单的ref
      resetForm(formRef) {
        this.$refs[formRef].resetFields()
      }
    }
  }
</script>

<style lang="less" scoped>
  #login_container {
    background-color: #2b4b6b;
    height: 100%;
  }

  .login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    /* 使元素居中 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .active_box {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 1px solid #eee;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }

  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }

  .btn_box {
    display: flex;
    justify-content: flex-end;
  }
</style>